import React, {Component} from 'react';
import MobileTopOffset from '../../../component/MobileTopOffset';
import { Icon, Input, Button, Checkbox } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './css/Login.css';

class Login extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		return(
			<div className='loginContainer'>
				<MobileTopOffset />
				<div className={'head ' + styles.head}>
					<span className={'logo ' + styles.logo}>
						<img className={'logoImg ' + styles.logoImg} src={require('../../../asset/img/logo-transparent.png')} />
					</span>
				</div>
				<div className='separatorLine'></div>
				<div className={'container ' + styles.container}>
					<div className={'lineSpace ' + styles.lineSpace}>
						<Input 
						value={state.account}
						onChange={(e) => {
							dispatch({
								type: 'login/accountChange',
								payload: e.target.value
							});
						}} 
						onKeyUp={
							(e) => {
								if(e.keyCode === 13) {
									dispatch({
										type: 'login/login'
									});
								}
							}
						} 
						prefix={<Icon type='user' style={{ fontSize: 13 }}/>} 
						size='large'
						type='text' 
						placeholder='用户名/邮箱' 
						autoFocus />
					</div>
					<div className={'lineSpace ' + styles.lineSpace}>
						<Input 
						prefix={<Icon type='lock' style={{ fontSize: 13 }}/>} 
						value={state.password}
						onChange={(e) => {
							dispatch({
								type: 'login/passwordChange',
								payload: e.target.value
							});
						}} 
						onKeyUp={
							(e) => {
								if(e.keyCode === 13) {
									dispatch({
										type: 'login/login'
									});
								}
							}
						} 
						size='large'
						type='password' 
						placeholder='密码' />
					</div>
					<div className={'keepLoginContainer lineSpaceSmall ' + styles.lineSpaceSmall}>
						{/*
						<Checkbox 
						checked={state.keepLogin} 
						onChange={(e) => {
							dispatch({
								type: 'login/keepLoginChange',
								payload: e.target.checked
							});
						}}>
							保持登录
						</Checkbox>
						*/}
					</div>
					<div className={'lineSpace ' + styles.lineSpace}>
						<Button 
						className={styles.loginButton} 
						type='primary' 
						size='large' 
						loading={state.loading}
						onClick={() => {
							dispatch({
								type: 'login/login'
							});
						}}>
							登录
						</Button>
					</div>
					<div className={'lineSpace ' + styles.lineSpace}>
						<Link className={'register ' + styles.register} to='/register'>
							立即注册
						</Link>
						<Link className={'forgetPassword ' + styles.forgetPassword} to='/forgetPassword'>
							忘记密码
						</Link>
					</div>
					<div className={'footer ' + styles.footer}>
						<div className={styles.footerContent}>
							浙ICP备17032658号
							{' '}
							版权所属
							{' '}
							<a href='javascript:void(0);'>减一科技</a>
						</div>
					</div>
				</div>
			</div>
		)
	}
	
	componentDidMount() {
		this.props.dispatch({type: 'login/init'});
	}
	
}

export default connect((state) => ({
	state: {
		...state.login,
		loading: state.loading.models.login
	}
}))(Login);